<template>
  <div class="right-panel">
    <div class="panel-content right-card-device">
      <PanelTitle title="设备运行状况"> </PanelTitle>
      <div class="panel-warp">
        <div class="row1">
          <div class="item-card" :class="stateKuanMap[data.sdcc_status]">
            <img
              src="@/assets/rightImage/SDCC.png"
              alt=""
              width="36"
              height="36"
            />
            <div class="names">湿电除尘</div>
            <div class="status " :class="data.sdcc_status">
              <span>{{ statusMap[data.sdcc_status]  }}
                
              </span>
            </div>
          </div>
          <div class="item-card" :class="stateKuanMap[data.ttxt_status]">
            <img src="@/assets/rightImage/TL.png" alt="" />
            <div class="names">脱硫系统</div>
            <div class="status" :class="data.ttxt_status">
              <span>{{ statusMap[data.ttxt_status] }}</span>
            </div>
          </div>
          <div class="item-card" :class="stateKuanMap[data.scy_status]">
            <img src="@/assets/rightImage/SCY.png" alt="" />
            <div class="names">数采仪工作状态</div>
            <div class="status" :class="data.scy_status">
              <span>{{ statusMap[data.scy_status] }}</span>
            </div>
          </div>
        </div>
        <div class="row2" :class="stateKuanMap[data.fxy_status]">
          <div class="img-text">
            <img src="@/assets/rightImage/LJZT.png" alt="" />
            <di class="img-name-blue">分析仪连接状态</di>
          </div>
          <div class="status" :class="data.fxy_status">
            <span>{{ statusMap[data.fxy_status] }}</span>
          </div>
        </div>
        <div class="row2" :class="stateKuanMap[data.fxy_wd_status]">
          <div class="img-text">
            <img src="@/assets/rightImage/WDBJZT.png" alt="" />
            <di class="img-name-blue">分析仪温度报警</di>
          </div>
          <div class="status" :class="data.fxy_wd_status">
            <span>{{ statusMap[data.fxy_wd_status] }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="panel-content right-card-warn">
      <PanelTitle title="超标预警"></PanelTitle>
      <div class="panel-warp">
        <div class="table">
          <div class="table-t">
            <div>监测项目</div>
            <div>数值（mg/m³）</div>
            <div>时间</div>
          </div>
          <div class="table-d">
            <img src="@/assets/rightImage/noData.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="panel-content right-card-device-control">
      <PanelTitle title="智能电力调控系统"></PanelTitle>
      <div class="panel-warp">
        <div class="chart" style="height: 300px">
          <electricityLine></electricityLine>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import electricityLine from "@/views/components/electricityLine.vue";
import PanelTitle from "@/views/components/PanelTitle.vue";
const statusMap = {
  ok: "正常",
  fail: "异常", // 标红
  close: "停止",
};
const hasConnect = {
  ok: "已连接",
  fail: "未连接",
};

const stateKuanMap = {
  ok: "",
  fail: "active", // 标红
  close: "",
};
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});
</script>
<style scoped lang="scss">
.right-panel {
  .panel-content {
    // border: 1px solid red;
    height: 300px;
    margin-bottom: 16px;
    .panel-warp {
      padding: 8px 0;
      padding-left: 5px;
      color: #fff;
      //这里应该搞出去吧
      .row1 {
        display: flex;
        justify-content: space-between;
        .item-card {
          width: 138px;
          height: 122px;
          margin: 0 6px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background: rgba(0, 60, 97, 0.3);
          box-sizing: border-box;
          border: 2px solid rgba(0, 157, 255, 0.5);
          &:first-child {
            margin-left: 0;
          }
          &.active {
            background: rgba(0, 60, 97, 0.3);
            box-sizing: border-box;
            border: 2px solid rgba(250, 81, 81, 0.5);
            box-shadow: inset 0px 0px 20px 0px #fa5151;
          }
          .names {
            margin: 6px 0;
            letter-spacing: 1px;
            font-weight: 600;
            font-family: "钉钉进步体 Regular";
            background: linear-gradient(180deg, #f4ffff 0%, #009dff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
          }
        }
      }
      .row2 {
        margin-top: 8px;
        padding-right: 20px;
        padding-left: 20px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        background: rgba(27, 93, 94, 0.3);

        box-sizing: border-box;
        border: 2px solid rgba(73, 253, 255, 0.5);
        &.original {
          background: rgba(90, 45, 0, 0.3);
          border: 2px solid rgba(255, 143, 31, 0.5);
        }
        &.active {
          // background: rgba(27, 93, 94, 0.3);

          // box-sizing: border-box;
          border: 2px solid rgba(250, 81, 81, 0.22);

          box-shadow: inset 0px 0px 20px 0px #fa5151;
        }
        .img-text {
          display: flex;
          align-items: center;

          > img {
            margin-right: 18px;
            // vertical-align: middle;
          }
          .img-name-blue {
            letter-spacing: 2px;
            font-weight: 600;
            font-size: 20px;
            background: linear-gradient(180deg, #f4ffff 0%, #49fdff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
          }
        }
      }
    }
    &.right-card-warn {
      .table {
        .table-t {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 32px;
          border-radius: 2px;
          padding: 0 20px;
          background: #0b346f;
          color: #ade2ff;
        }
        .table-d {
          height: 220px;
          margin-top: 16px;
          // border: #009dff solid 1px;
          // overflow-y: scroll;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  .status {
    /* 自动布局 */
    // display: flex;
    // align-items: center;
    // justify-content: center;
    padding: 2px 16px;
    line-height: 22px;
    background: rgba(0, 181, 120, 0.5);
    &.ok {
      background: rgba(0, 181, 120, 0.5);
      
    }
    &.fail {
      background: rgba(250, 81, 81, 0.5);
    }
    &.close {
      background: rgba(250, 81, 81, 0.5);
    }
 
  }
}
</style>
